<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>教师端 - 答题结果查询 - 电视猪在线答题系统 V1.0.0</title>
        <style>
            button {
                /* 按钮美化 */
                width: 270px;
                /* 宽度 */
                height: 40px;
                /* 高度 */
                border-width: 0;
                /* 边框宽度 */
                border-radius: 3px;
                /* 边框半径 */
                background: #1E90FF;
                /* 背景颜色 */
                cursor: pointer;
                /* 鼠标移入按钮范围时出现手势 */
                outline: none;
                /* 不显示轮廓线 */
                font-family: Microsoft YaHei;
                /* 设置字体 */
                color: white;
                /* 字体颜色 */
                font-size: 17px;
                /* 字体大小 */
            }
            button:hover {
                /* 鼠标移入按钮范围时改变颜色 */
                background: #5599FF;
            }
            input[type = "text"] {
                outline-style: none;
                border: 1px solid #ccc;
                border-radius: 3px;
                padding: 14px;
                width: 620px;
                font-size: 16px;
            }
            body {
                background-image: url("https://static.runoob.com/images/mix/paper.gif");
                background-color: #cccccc;
            }
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                list-style: none;
            }

            .main {
                width: 800px;
                margin: 0 auto;
                text-align: center;
                overflow: hidden;
            }

            .title {
                margin-top: 30px;
                font-size: 30px;
                font-weight: bold;
            }

            .get {
                margin-top: 20px;
            }
            .result {
                width: 400px;
                margin: 20px auto;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="title">答题结果查询</div>
            <div class="get">
                <button onclick="copyTable()">导出</button>
            </div>
            <table class="result">
                <tr>
                    <td>姓名</td>
                    <td>学校</td>
                    <td>成绩</td>
                </tr>
                {% for tempList in data %}
                    <tr>
                        {% for temp in tempList %}
                            <td>{{ temp }}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </table>
        </div>
        <script>
            //将table中的数据放置粘贴板
            function copyTable() {
                //获取table数据
                let data = '';
                let tb = document.getElementsByTagName("table")[0];
                let rows = tb.rows;
                for (let i = 0; i < rows.length; i++) {
                    let cells = rows[i].cells;
                    for (let j = 0; j < cells.length; j++) {
                        data = data + cells[j].textContent + '\t';
                    }
                    data = data.slice(0, -1) + '\n';
                }
                data = data.slice(0, -1);
                //将数据添加至粘贴板
                let textArea = document.createElement("textarea");
                textArea.value = data;
                document
                    .body
                    .appendChild(textArea);
                textArea.select();
                try {
                    document.execCommand('copy')
                } catch (err) {
                    alert('导出失败')
                }
                document
                    .body
                    .removeChild(textArea);
                alert('数据已导出到剪贴板，找个表格粘贴吧～')
            }
        </script>
    </body>
</html>